<template>
	<view class="container">
		<uni-nav-bar title="商品分类" fixed statusBar :border="false"></uni-nav-bar>
		<view class="searchBox" @click="gotoSearch">
			<uni-search-bar class="searchBox-search" placeholder="请输入产品名称" radius="10" bgColor="#eee"
				readonly></uni-search-bar>
		</view>
		<view class="typeList">
			<TypeList :activeTypeCard="activeTypeCard" :activeTag="activeTag" :datas="datas" :goodsData="goodsData"
				:handleTypeCard="handleTypeCard" :handleTag="handleTag" :handleClick="gotoDetial" type='READ' />
		</view>
		<to-top :isShow="isShowTop" :right="30"></to-top>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onShow,
		onPullDownRefresh,
		onPageScroll
	} from '@dcloudio/uni-app'
	import TypeList from '/pages/type/components/typeList/index.vue'

	const activeTypeCard = ref('')
	const activeTag = ref('')
	const datas = ref([])
	const goodsData = ref([])
	const isShowTop = ref(false)

	const loadingOptions = {
		loadingOptions: {
			title: '加载中...',
			mask: true
		},
		errorOptions: {
			type: 'toast'
		}
	}

	const handleTypeCard = (id) => {
		if (id !== activeTypeCard.value) {
			activeTypeCard.value = id
			activeTag.value = datas.value.find(val => val._id === id)?.children?.[0]?._id
			getGoodsData()
		}
	}

	const handleTag = (id) => {
		if (id !== activeTag.value) {
			activeTag.value = id
			getGoodsData()
		}
	}

	const gotoSearch = (e) => {
		uni.switchTab({
			url: '/pages/search/index',
		})
	}

	const gotoDetial = (item) => {
		const {
			_id,
			name
		} = item || {}
		uni.navigateTo({
			url: `/pages/detail/index?id=${_id}&name=${name}`
		})
	}

	const getGoodsData = async (category_id = activeTag.value, options = loadingOptions) => {
		const mallGoods = uniCloud.importObject('mall-goods', options)
		try {
			const res = await mallGoods.getData(category_id)
			goodsData.value = res?.data
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
	}

	const getCategoriesData = async (options = loadingOptions) => {
		const mallCategories = uniCloud.importObject('mall-categories', options)
		try {
			const res = await mallCategories.getData()
			datas.value = res?.data

			const {
				typeId,
				isFirstShow
			} = getApp().globalData.typeOptions

			if (typeId) {
				activeTypeCard.value = typeId
				activeTag.value = res.data.find(val => val._id === typeId)?.children?.[0]?._id
				getApp().globalData.typeOptions.typeId = null
				if (isFirstShow) {
					getApp().globalData.typeOptions.isFirstShow = false
				}
			} else if (isFirstShow) {
				const initialTypeId = res?.data?.[0]?._id
				activeTypeCard.value = initialTypeId
				activeTag.value = res.data.find(val => val._id === initialTypeId)?.children?.[0]?._id
				getApp().globalData.typeOptions.isFirstShow = false
			}

			getGoodsData()
		} catch (err) {
			console.log('错误 ', err.errCode, '：', err.errMsg, 'Json：', err)
		}
		uni.stopPullDownRefresh()
	}

	onPullDownRefresh(() => getCategoriesData())
	onShow(() => {
		getCategoriesData()
	})
	onPageScroll(e => {
		if (e.scrollTop > 200) {
			isShowTop.value = true
		} else {
			isShowTop.value = false
		}
	})
</script>

<style lang="scss" scoped>
	@import url("/styles/common.scss");

	.container {
		width: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: white;
	}

	.searchBox {
		width: 92vw;
		padding-top: var(--margin-vertical);

		&-search {
			width: 100%;
		}
	}

	.typeList {
		width: 100%;
	}
</style>